<template>
    <div class="remind-panel-content">
        <template v-if="!showForm">
            <el-skeleton 
                :loading="loading"
                :rows="6" 
                animated 
            ></el-skeleton>

            <div 
            v-if="!loading"
            class="list-content"
            >
                <div class="list" v-if="tableData && tableData.length > 0">

                    <div class="item" v-for="(item) in bidShowList" :key="item.guid">
                        <el-popover
                        placement="left"
                        width="300"
                        trigger="hover">

                            <detail-view v-bind="item"></detail-view>

                            <div slot="reference"> 
                                <span class="bid-name">{{ item.content}}</span>剩
                                <cd-time :start="item.opentime" @clear="clear(item.guid)"></cd-time>
                                <i class="el-icon-delete icon-delete" @click="del(item.guid)" slot="reference"></i>
                            </div>

                        </el-popover>
                    </div>
                </div>

                <div 
                class="more" 
                v-show="tableData && tableData.length > defaultListNum"
                >
                    <el-button v-show="!more" type="text" @click="moreChange(true)">更多<i class="el-icon-arrow-down"></i></el-button>
                    <el-button v-show="more" type="text" @click="moreChange(false)">收起<i class="el-icon-arrow-up"></i></el-button>
                </div>

                <div 
                class="empty" 
                v-if="!tableData || !tableData.length"
                >
                    <el-link type="info" :underline="false">
                        您还未设置提醒功能 · 赶快
                        <span class="add" @click="add" v-czc="['首页', '点击按钮' , '添加待办提醒',0 ,'home-btn-addReminder']">添加</span> 吧!
                    </el-link>
                </div>
            </div>
        </template>

        <template v-if="showForm">
            <form-view ref="bidForm" @click="submit" :afterSubmit="afterSubmit"></form-view>
        </template>
    </div>
</template>

<script>
import countdown from "../mixins/countdown"
import cdTime from '../components/cd-time.vue';
import FormView from '../components/form.vue';
import DetailView from '../components/detail.vue';

import { mapGetters, mapActions } from 'vuex';

export default {
    head: {},
    mixins:[countdown],
    components: {
        cdTime,
        FormView,
        DetailView
    },
    props: {
        getReminderStatistic: {
            type: [Function,Boolean],
            default: false
        },

        //列表中默认展示的数量，多余的展示更多按钮
        defaultListNum: {
            type: Number,
            default: 999,
        },
    },
    data: () => ({
        showForm: false,// 表单显示状态
        tableData:[],
        more:false,//是否展示更多

        loading: true,
    }),
    computed: {
        ...mapGetters({
            getNickname: 'userinfo/getNickname'
        }),
        bidShowList() {
            var len = this.tableData ? this.tableData.length : 0;

            if(len > 0) {
                return this.more ? this.tableData : this.tableData.slice(0, this.defaultListNum);
            }else {
                return []
            }
        }
    },
    methods: {
        add() {
            if(this.getNickname){
                this.showForm = true;
            }else{
                this.showLogin();
            }
        },
        queryList(){
            this.loading = true;

            this.$get(`${this.$store.state.api.tbUrl}/home/bidlist.json`, data => {
                this.tableData = data;

                if(
                    this.tableData 
                    && this.tableData.length <= this.defaultListNum
                ) {
                    this.more = false
                }

                this.loading = false;
            });
        },
        submit(){
            this.$refs.bidForm.submitForm()
        },
        afterSubmit(){
            this.showForm = false;
            this.queryList();
            !!this.getReminderStatistic && this.getReminderStatistic();
        },
        del(id){
            ShowConfirm('确认删除吗', 'warning', () => {

                this.$post(`${this.$store.state.api.tbUrl}/home/bidreminderdel.json`, {
                    id,
                }, () => {
                    ShowMsg( '删除成功', 'success');

                    this.queryList();

                    !!this.getReminderStatistic && this.getReminderStatistic();
                });
            }, function() {
                ShowMsg( '已取消删除', 'info');
            })
        },
        moreChange(status){
            this.more = status
        },
        clear(id){
            this.tableData = this.tableData.filter(item => item.guid !== id);

            this.getReminderStatistic && setTimeout(this.getReminderStatistic, 1000)
        },
        cancel(){
            this.showForm = false;
            this.$refs.bidForm.clear();
        },
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
    },
    mounted() {
        this.queryList();
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
    .remind-panel-content{
        overflow: auto;

        .list-content{
            height: 100%;
        }
        
        .list {
            .item {
                position: relative;
                margin-top: 13px;
    
                .bid-name {
                    display: block;
                    float: left;
                    width: 160px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
    
                .icon-delete {
                    position: absolute;
                    top: 2px;
                    right: 0;
                    cursor: pointer;
                }
            }
        }

        .more {
            text-align: center;
            ::v-deep .el-button--text {
                color: $infoColor;
            }
        }

        .empty {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            a {
                cursor: auto;
            }   
            .el-link{
                color: $primaryColor;
            }
            .add {
                color: $primaryColor;

                &:hover {
                    cursor: pointer;
                }
            }
        }
    }

    .el-icon-delete {
        color: $infoColor;
    }
</style>
 